<!--
	罗玲
	5.06
-->
<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">QQ音乐</h1>
		</header>
		<div class="mui-content">
		    <audio id="audio" src="" autoplay="autoplay"></audio>
			<ul class="mui-table-view">
			    <!--<li class="mui-table-view-cell mui-media">
			        <a href="javascript:;">
			            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
			            <div class="mui-media-body">
			                幸福
			                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
			            </div>
			        </a>
			    </li>-->
			</ul>
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			$(function(){
			mui.init()
			     //        http://route.showapi.com/213-4?showapi_appid=37238&showapi_sign=2064715d5e004c8388f747201259d589&topid=5	
			mui.ajax('http://route.showapi.com/213-4?showapi_appid=37238&showapi_sign=2064715d5e004c8388f747201259d589&topid=5	',{
//					data:{
//						showapi_appid:'37238',
//						showapi_sign:'2064715d5e004c8388f747201259d589  ',
//						topid:'5'
//					},
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(data){
						var ul=$('ul');
						var str='';
						 arr=data.showapi_res_body.pagebean.songlist;
						for(var i=0;i<arr.length;i++){
							str+='<li class="mui-table-view-cell mui-media" data-url="'+arr[i].url+'">'
						    str+='<a href="javascript:;">' 
						    str+='<img class="mui-media-object mui-pull-left" src='+arr[i].albumpic_small+'>'
						    str+='<div class="mui-media-body">'
						    str+='<span>'+arr[i].songname+'</span>'       
						    str+='<p class="mui-ellipsis">'+arr[i].singername+'</p>'  
						    //str+='<audio src='+arr[i].url+' class="mui-ellipsis" width="100" height="50"></audio>'
						    str+='</div>' 
						    str+='</a>'
						    str+='</li>'
						};
						ul.append(str);
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
});
//					$('li').click(function(){
//						var url =$(this).data('url');
//						$('audio')[0].src=url;
//					})
				$("body").on("click", "li", function(){
					i=$(this).index()
					audio.src=arr[i].url;
					audio.play()
				});

	})
		</script>
	</body>

</html>